/**
 * 流程模板
 */
import React, { useEffect } from 'react';
import { Tabs, Card } from 'antd';
import { connect } from 'umi';

import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { WorkFlow } from '@/components/WorkFlow';
import { withRoutePage } from '@/utils/enhanceUtils';
import FlowForm from './FlowForm';
import BaseConfig from './BaseConfig';
import styles from './template.less';

const { TabPane } = Tabs;

const Template = ({ dispatch, location, templateManage, loading }) => {
    const { templateDetail, flowJson } = templateManage;
    const { query } = location;

    /* 获取流程图数据 */
    const fetchFlowJson = ({ processDeploymentId }) => {
        dispatch({
            type: 'templateManage/fetchFlowJson',
            payload: { processDeploymentId }
        });
    };

    const init = () => {
        dispatch({
            type: 'templateManage/fetchTemplateDetail',
            payload: { templateId: query.id },
            callback: data => {
                document.title = data.templateName;
                const { processDeploymentId } = data;
                fetchFlowJson({ processDeploymentId });
            }
        });
    };

    useEffect(() => {
        init();
    }, []);

    return (
        <PageHeaderWrapper>
            <Card bordered={false} loading={loading} bodyStyle={{ paddingTop: loading ? 24 : 0 }}>
                <Tabs defaultActiveKey="1" size="large" tabBarStyle={{ marginBottom: 32 }}>
                    <TabPane tab="流程基本设置" key="1">
                        <BaseConfig data={templateDetail} />
                    </TabPane>
                    <TabPane tab="流程表单" key="2" className={styles.special}>
                        <FlowForm templateId={query.id} location={location} />
                    </TabPane>
                    <TabPane tab="流程图" key="3">
                        <WorkFlow data={flowJson} />
                    </TabPane>
                </Tabs>
            </Card>
        </PageHeaderWrapper>
    );
};

const mapStateToProps = ({ templateManage, loading }) => ({
    templateManage,
    loading: loading.effects['templateManage/fetchTemplateDetail']
});

export default withRoutePage(connect(mapStateToProps)(Template));
